Was wird geprüft?

Seiteninhalte sollen unabhängig von der Darstellung in einer sinnvollen und brauchbaren Reihenfolge stehen. Was inhaltlich zusammengehört (etwa eine Überschrift und die dazugehörigen Inhalte darunter) soll nicht auseinandergerissen werden. Mittels CSS versteckte Seiteninhalte sollen deshalb an sinnvoller Stelle im Seitenquelltext erscheinen.

Dynamische Inhalte, die im Ausgangszustand visuell versteckt sind, sollen auch für Screenreader verborgen sein, damit sie nicht die Lesereihenfolge stören.

Ausschlaggebend bei der Prüfung ist nicht, ob die Seite in der Ansicht ohne CSS visuell eine verständliche Lesereihenfolge hat. Ausschlaggebend ist, ob bei eingeschaltetem CSS die Reihenfolge beim linearen Lesen mit dem Screenreader sinnvoll ist.

Warum wird das geprüft?

Screenreader lesen die Elemente, die auf dem Bildschirm in der Fläche angeordnet sind, nacheinander vor - und zwar in der Reihenfolge, in der sie im Quellcode stehen. Die Reihenfolge der Elemente muss also gut verständlich und nutzbar sein.

Wie wird geprüft?

1. Anwendbarkeit des Prüfschritts

Der Prüfschritt ist anwendbar, wenn CSS verwendet wird, insbesondere für die Positionierung von Inhalten, und wenn Inhalte dynamisch eingeblendet oder eingefügt werden.

2. Prüfung

2.1 Lesereihenfolge für Screenreader-Nutzer

Seite im Firefox aufrufen und in der Web Developer Toolbar CSS > Disable All Styles wählen. Bleibt die logische Reihenfolge von sichbaren Seiten-Inhalten nach dem Abschalten von CSS erhalten? CSS wieder einschalten. Die Reihenfolge der Inhalte mit dem Screenreader NVDA im Lesemodus (Pfeiltaste nach unten) überprüfen. Gibt es Linearisierungsprobleme, die bei der Screenreader-Nutzung störend sind? Werden visuell versteckte Inhalte vorgelesen?

2.2 Prüfung der Linearisierbarkeit von Layouttabellen

Wenn Tabellen für das Layout (die Anordnung von Elementen auf der Seite) eingesetzt werden, müssen sie linearisierbar sein.

Seite im Firefox anzeigen. Mittels Web Developer Toolbar die Funktion Miscellaneous > Linearize page die Struktur der Seite und damit die der Layouttabelle linearisieren. Prüfen, ob die lineare Reihenfolge der angezeigten Inhalte sinnvoll ist.

3. Hinweise

Reihenfolge von Inhalten

Die visuelle Anordnung der Seitenelemente kann von der Reihenfolge im Quelltext abweichen. Sichtbare Inhalte sollen in der Regel in der gleichen Reihenfolge wie im Quelltext stehen. Bei der Nutzung von CSS Layout-Technik grid kommt es hier häufiger zu Problemen.

Dynamische Elemente

Häufig und deshalb auch zu akzeptieren sind durch CSS versteckte Inhalte etwa Ausklappmenüs oder Popup-Elemente, die bei der Ansicht ohne CSS sichtbar werden. Problematisch sind sie für Screenreader-Nutzer vor allem dann, wenn sie zwar visuell mittels CSS versteckt werden, aber vom Screenreader im Lesemodus dennoch erreicht werden, z. B. weil sie nicht mit geeigneten Mitteln wie display:none versteckt wurden.

Zu WAI-ARIA: Die Verwendung von WAI-ARIA spielt in diesem Prüfschritt keine Rolle.

4. Bewertung

Nicht voll erfüllt

  • Versteckte Texte oder dynamische Einfügungen erscheinen an verwirrender Stelle beim Lesen mit dem Screenreader.

Einordnung des Prüfschritts

Abgerenzung zu anderen Prüfschritten

  • Custom controls, die etwa Benutzerschnittstellen aus positionierten `div`s mit Hintergrundbildern erzeugen, werden bereits in einer Reihe von bestehenden Prüfkriterien implizit geprüft, etwa 9.2.4.7 "Aktuelle Position des Fokus deutlich", und 9.4.1.2 "Name, Rolle, Wert verfügbar".

  • Die korrekte Reihenfolge im Quelltext bei dynamisch generierten oder eingeblendeten Elementen ist Gegenstand von Prüfschritt 9.2.4.3 "Schlüssige Reihenfolge bei der Tastaturbedienung".

Einordnung des Prüfschritts nach WCAG 2.1

Guideline

Success criterio

Techniques

General Techniques

CSS Techniques

Scripting Techniques

Failures

Quellen